<script type="text/javascript">
function preview(img, selection) { 
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);
} 

$(document).ready(function () { 
	$('#thumbnail').imgAreaSelect({aspectRatio: '1:<?php echo $this->thumb_height/$this->thumb_width;?>', handles: true });
	$('#thumbnail').imgAreaSelect({
        onSelectEnd: function (img, selection) {
            $('#x1').val(selection.x1);
            $('#y1').val(selection.y1);
            $('#x2').val(selection.x2);
            $('#y2').val(selection.y2);
            $('#w').val(selection.y2);
            $('#h').val(selection.y2);
        }
    });
	$('#save_thumb').click(function() {
		var x1 = $('#x1').val();
		var y1 = $('#y1').val();
		var x2 = $('#x2').val();
		var y2 = $('#y2').val();
		var w = $('#w').val();
		var h = $('#h').val();
		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
			alert("You must make a selection first");
			return false;
		}else{
			return true;
		}
	});
}); 

</script>

	<div align="center">
		<img src="<?php echo $this->imgLarge;?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />

		<form name="thumbnail" action="<?php echo URL;?>UploadImg/save_photo_upload" method="post">
			album :<select name="album">
					<?php 
						$path= SVROOT.'Models/Photos_model.php';
						if (file_exists($path)) {
							require $path;
							$modelName = 'Photos_model';
							$this->model = new $modelName;
							$data = $this->model->get_all_albums($_SESSION['id']);
							foreach ($data as $key => $value) {
								echo '<option value="'.$value['Id'].'">'.$value['Name'].'</option>';
							}
						}
					?>
				</select>
			Detail :<input type="text" name ="Detail" value="" />
			Role :<select name="role">
					<option value="Public">Public</option>
					<option value="Private">Private</option>
				</select>
			<input type="hidden" name="x1" value="" id="x1" />
			<input type="hidden" name="y1" value="" id="y1" />
			<input type="hidden" name="x2" value="" id="x2" />
			<input type="hidden" name="y2" value="" id="y2" />
			<input type="hidden" name="w" value="" id="w" />
			<input type="hidden" name="h" value="" id="h" />
			<input type="submit" name="upload_thumbnail" value="save" id="save_thumb" />
		</form>
	</div>